<template>
  <div class="begin">

    <div class="roll-box">
      <div class="roll">
        <p v-if="!isDisabled"
          class="note text-c">Click the start button to start digging</p>
        <ul v-else>
          <li v-for="(item, index) in codeData"
            :key="index">
            <p v-html="potholingObj.msg"></p>
          </li>
        </ul>
      </div>
    </div>

    <div class="desc-box">
      <ul>
        <li class="line-bottom">
          <div class="left-txt">Automatic mine-digging</div>
          <div class="digging">Time：{{potholingObj.total_time || 0}} minute</div>
        </li>

        <li class="line-bottom">
          <div class="left-txt">Estimated time of ore mining</div>
          <div style="color: #3774DB; font-size: 12px; min-width: 100px;">
            <x-progress :percent="pmgressbar || 0" :show-cancel="false"></x-progress>
          </div>
        </li>

        <li class="line-bottom">
          <div class="left-txt">My Bikebi</div>
          <div style="color: #3774DB;">{{potholingObj.bites || deviceBikeTotal || 0}}Bikebi</div>
        </li>
      </ul>
      <div v-show="!isDisabled" @click.stop.prevent="firstGetData"
        class="Binding-box">
        <button :disabled="isDisabled">Start</button>
      </div>
    </div>
  </div>
</template>

<script>
import { request } from '@/utils/request'
import { XProgress } from 'vux'
import loginVue from './login.vue'
import { log } from 'util'

export default {
  components: {
    XProgress
  },
  props: ['deviceId', 'deviceBikeTotal'],
  data() {
    return {
      codeData: ['', '', '', '', ''],
      potholingObj: {},
      loopTime: '', // 循环时间
      endTime: '',
      flag: false,
      isTrue: '',
      DataTimer: null,
      pmgressbar: '',
      isDisabled: false
    }
  },
  created() {},
  methods: {
    firstGetData() {
      request({
        method: 'post',
        url: DOUBANAPI + '/saveDeviceTime',
        data: {
          device_id: this.deviceId
        }
      })
        .then(res => {
          console.log('first', res)
          this.potholingObj = res.data
          this.loopTime = res.data.next_time * 1000
          this.endTime = res.data.surplus_time
          this.loopGetData()
          this.isDisabled = true
        })
        .catch(err => {
          this.isDisabled = false
          console.log(err)
        })
    },
    loopGetData() {
      this.DataTimer = setInterval(() => {
        console.log(this.loopTime)
        request({
          method: 'post',
          url: DOUBANAPI + '/saveDeviceTime',
          data: {
            device_id: this.deviceId
          }
        })
          .then(res => {
            console.log('loop', res)
            this.potholingObj = res.data
            this.loopTime = res.data.next_time * 1000
            this.endTime = res.data.surplus_time
            this.isTrue = res.data.is_true // 挖到
            this.pmgressbar = Math.floor(
              res.data.operation_times / res.data.total_operation_times * 100
            )

            if (res.data.is_success == 0) {
              // 时间中断
              clearInterval(this.DataTimer)
              this.DataTimer = null
              this.firstGetData()
            }
          })
          .catch(err => {
            console.log(err)
            clearInterval(this.DataTimer)
            this.DataTimer = null
            this.isDisabled = false
          })
      }, this.loopTime)
    }
  },
  watch: {
    pmgressbar(val) {
      console.log('pmgressbar', val)
    }
  }
}
</script>


<style lang="less">
.begin {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url('../assets/images/begin.png');
  background-repeat: no-repeat;
  background-size: cover;
  .roll-box {
    padding: 0 15px;
    margin-top: 80px;
    .roll {
      width: 100%;
      height: 260px;
      padding: 0 10px;
      background-color: #13144c;
      overflow: hidden;
      ul {
        height: inherit;
        list-style: none;
        animation: ani 3s linear infinite; /*动画ani，5s，循环匀速播放*/
        li {
          min-height: 17px;
          line-height: 17px;
          font-size: 12px;
          p,
          pre {
            background: transparent !important;
            color: #fff !important;
          }
        }
      }
    }
  }
  @keyframes ani {
    0% {
      margin-top: 0;
    }
    12.5% {
      margin-top: 0;
    }
    25% {
      margin-top: -80px;
    }
    37.5% {
      margin-top: -80px;
    }
    50% {
      margin-top: -160px;
    }
    62.5% {
      margin-top: -160px;
    }
    75% {
      margin-top: -240px;
    }
    87.5% {
      margin-top: -240px;
    }
    100% {
      margin-top: -320px; /*最后是一个，这样可以打断动画*/
    }
  }
  .loop-box {
    width: 100%;
    height: 260px;
    padding: 0 15px;
    margin-top: 80px;
  }

  .desc-box {
    margin-top: 50px;
    .line-bottom {
      position: relative;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 15px;
      color: #fff;
      font-size: 15px;
      &::after {
        content: ' ';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background-color: #ffffff;
        transform: scaleY(0.5);
      }
      .left-txt {
        height: 21px;
        line-height: 21px;
      }
      .digging {
        width: 120px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        border-radius: 13px;
        background-color: #3774db;
        font-size: 12px;
      }
    }
  }
  .note {
    height: 21px;
    line-height: 21px;
    margin-top: 120px;
    font-size: 18px;
    color: #fff;
  }
  .Binding-box {
    width: 100%;
    height: 44px;
    line-height: 44px;
    margin-top: 30px;
    padding: 0 15px;
    text-align: center;
    button {
      width: inherit;
      height: inherit;
      font-size: 19px;
      border-radius: 22px;
      color: #fff;
      // background: linear-gradient(to right, #2ad0d3 0%, #3772db 100%);
    }
  }
  .weui-progress__bar,
  .weui-progress__inner-bar {
    height: 10px;
    border-radius: 5px;
  }
}
</style>
